<template>
	<view>
		<pageHeader  @back='back' :fixed='true' :border='true'>
			<text>艺术精品详情</text>
			<image src="/static/svg/moer11.svg" @tap="toShowMenu"  class="header-right-img" slot="right"></image>
		</pageHeader>
		<view class="body">
			<view class="title">
				<text>{{message.fineTitle}}</text>
			</view>
			<view class="style_desc" >
				<text class="style" style="margin-left: 30rpx">{{message.source}}</text>
				<text class="desc" @tap="toPersonalDeail" :data-userid="message.userId" data-type='艺术精品'>{{message.userName}}</text>
				<view class="time">
					<text style="line-height: 56rpx;">{{message.addTime}}</text>
				</view>
			</view>
			<view style="height: 1rpx;background-color: #EEEEEE;margin-top: 4rpx;"></view>
			<rich-text :nodes='message.fineContent' v-if="message.fineContent"/>
			<view style="height: 1rpx;background-color: #EEEEEE;margin-top: 30rpx;"></view>
		</view>
		<conciseComment :list='messageList' @praise='commentPraise' @dele='getThreeComment' @toMore='toAllComment'/>
		<view class="lookAndLook_title" v-if="lookList.length>0">
			<view></view>
			<text>看了又看</text>
			<view></view>
		</view>
		<view style="width: 750rpx;margin-top:-30rpx;"  :style="{height:height}" v-if="lookList.length>0">
			<xgWaterfall :columnCount="2"   :left-gap='"30rpx"' :right-gap='"30rpx"' :column-gap='"30rpx"' @success='success' :list='lookList'>
				<xgWaterfallItem  v-for='(item,index) in lookList' :key='index' >
					<fineArt :message='item' @praise='fineArtPraise' :index='index'/>
				</xgWaterfallItem>
			</xgWaterfall>
		</view>
		<view style="height:118rpx"></view>
		<productFooter :message='message' @collect='collect' @praise='praise' :isInDetail='true'/>
		<menu1 v-model="menuShow"></menu1>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	import conciseComment from "@/components/comment/conciseComment.vue"
	import fineArt from "@/components/index/fineArt.vue"
	import productFooter from "@/components/footer/productFooter.vue"
	import menu1 from "@/components/menu/menu.vue"
	import pageHeader from "@/components/header/header.vue"
	import xgWaterfall from "@/components/xg-waterfall/xg-waterfall.vue"
	import xgWaterfallItem from "@/components/xg-waterfall-item/xg-waterfall-item.vue"
	export default {
		components: {pageHeader,menu1,conciseComment,fineArt,productFooter,xgWaterfall,xgWaterfallItem},
		data() {
			return {
				height:"",
				menuShow:false,
				html:"",
				id:"",
				state:"",
				messageList:[],
				message:{},
				lookList:[]
			};
		},
		onLoad(e) {
			this.id=e.fineId
			this.state=e.State
		},
		onShow() {
			this.getMessage()
			this.getThreeComment()
		},
		methods: {
			async getThreeComment(e){
				if(e){
					this.message.discussNumber-=1
				}
				let data={}
				data.answerId=this.id
				data.state=3
				data.userId=localStorage.getItem("userId")
				let res=await urls.threeComment(data)
				this.messageList=res.data
			},
			async getMessage(){
				let data={}
				data.fineId=this.id
				data.userId=localStorage.getItem("userId")
				data.state=this.state
				let res=await urls.fineArtspecific(data)
				this.lookList=res.data.fineArticles
				this.message=res.data.specific
				this.imgPathList=this.message.fineImage.split(",")
				this.linkList=res.data.shop
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			success(e){
				this.height=e+'px'
			},
			toShowMenu(){
				this.menuShow=true
			},
			commentPraise(index,isAlready){
				if(!isAlready){
					this.messageList[index].zan="1"
					this.messageList[index].zanNumber-=1
				}else{
					this.messageList[index].zan="0"
					this.messageList[index].zanNumber+=1
				}	
			},
			toAllComment(){
				localStorage.setItem("designMessage",JSON.stringify(this.message))
				uni.navigateTo({
					url: '/pages/homeDesign/allComment?id='+this.id+"&state="+3
				})
			},
			collect(isAlready){
				if(!isAlready){
					this.message.collection="1"
					this.message.collectionNumber-=1
				}else{
					this.message.collection="0"
					this.message.collectionNumber+=1
				}	
			},
			praise(isAlready){
				if(!isAlready){
					this.message.zan="1"
					this.message.zanNumber-=1
				}else{
					this.message.zan="0"
					this.message.zanNumber+=1
				}	
			},
			fineArtPraise(index,isAlready){
				if(!isAlready){
					this.lookList[index].zan="1"
					this.lookList[index].zanNumber-=1
				}else{
					this.lookList[index].zan="0"
					this.lookList[index].zanNumber+=1
				}	
			},
		},
	}
</script>

<style lang="scss">
page{
	background-color:#F5F5F5 ;	
}
.header-right-img{
	height: 50rpx;
	width: 50rpx;
	margin-right: 29rpx;
}
.top_padding{
	height: 1rpx;
	background-color: #EEEEEE;
	position: fixed;
	width: 750rpx;
	top: 85rpx;
	z-index: 999;
}
.body{
	padding: 30rpx 30rpx 0;
	background-color: #FFFFFF;
	.title{
		text-align: justify;
		text{
			font-size: 32rpx;
			color:#333333 ;
			letter-spacing: 2rpx;
			line-height: 42rpx;
			font-weight: bold;
		}
	}
	.style_desc{
		margin-left: -30rpx;
		margin-top: 14rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.style{
			display: block;
			height:36rpx ;
			line-height: 36rpx;
			padding: 0 9rpx;
			background-color:#D7BD9F ;
			border-radius: 8rpx;
			color:#704F29 ;
			font-size: 24rpx;
			letter-spacing: 1rpx;
		}
		.desc{
			font-size:28rpx ;
			color:#333333 ;
			line-height: 32rpx;
			margin-left: 12rpx;
			margin-right: -10rpx;
		}
	}
	.time{
		margin-left: 30rpx;
		line-height: 24rpx;
		display: flex;
		align-items: center;
		text{
			font-size: 24rpx;
			letter-spacing: 1rpx;
			color: #999999;
			
		}
	}
}
rich-text{
	font-size:30rpx ;
	color: #333333;
	letter-spacing: 1rpx;
	text-align: justify;
	line-height: 48rpx;
}
rich-text/deep/p{
	margin-top: 30rpx;
	font-size:30rpx ;
	color: #333333;
	letter-spacing: 1rpx;
	text-align: justify;
	line-height: 48rpx;
}
rich-text/deep/img{
	width: 100%;
	margin-top: 30rpx;
	display: block;
}
.lookAndLook_title{
	height: 128rpx;
	width: 750rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	view{
		height: 1px;
		background-color: #DDDDDD;
		width: 166rpx;
	}
	text{
		font-size: 28rpx;
		color: #666666;
		letter-spacing: 1rpx;
		margin: 0 30rpx;
	}
}
</style>
